<template>
  <div>
    <p class="list-title" v-html="title"></p>
    <div class="list-box">
      <ul>
        <li>
          <!--<span class="blanks-text" v-for="(answer, index) in question.answer_list" :key="index">-->
            <!--<span class="num">({{index + 1}})</span>-->
            <!--<input type="text" v-model="input[index]" class="layui-input" value="" :disabled="disable">-->
          <!--</span>-->
          <span class="blanks-text" v-for="index in mocksNum">
            <span class="num">({{index}})</span>
            <input type="text" v-model="input[index-1]" class="layui-input" :disabled="disable">
          </span>
        </li>
        <li class="li-answer" v-if="showAnswer">
          <i :style="(question.right_answer.length !== 1) ? 'margin-right:12px' : ''">正确答案：</i>
          <span v-for="(answer, index) in question.right_answer" :key="index">
            <i class="serial-num" v-if="question.right_answer.length !== 1">({{index + 1}})</i>
            <i class="color-green">{{answer}}</i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tiankong",
    componentType: 'question',
    props:{
      index: Number,
      question: Object,
      disable:{
        type: Boolean,
        default: false
      },
      showAnswer: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        input: [],
      };
    },
    mounted () {
      if (this.question.user_is_answer) {
        this.input = this.question.user_answer;
      } else {
        this.input = new Array(this.mocksNum);
      }
    },
    //新增更新question
    watch: {
      'question' (val) {
        if (val && val.user_is_answer) {
          this.input = val.user_answer;
        }
      }
    },
    computed: {
      title () {
        if (this.question) {
          let question = this.question.question;
          let count = 0;
          let questionTitle = question.replace(/\[\]/g, function () {
            count ++;
            return `<span class="blanks"><i>(${count})</i></span>`
          });

          return `${this.index}. ${questionTitle} <span class="mark">&nbsp;&nbsp;(${this.question.score}分)</span>`;
        }
        return '';
      },
      mocksNum () {
        if (this.question) {
          let question = this.question.question;
          let count = 0;
          question.replace(/\[\]/g, function () {
            count ++;
          });
          return count;
        }
        return false;
      }
    },
    methods: {
      checkUserAnswer () {
        // if (this.input.length != this.question.answer_list.length)
        if (this.input.length != this.mocksNum)
          return true;
        if (this.input.length) {
          for (let i = 0; i < this.input.length; i++) {
            if (!this.input[i] || !$.trim(this.input[i])) {
              return true;
            }
          }
        }
        return false;
      },
      getQuestionAnswer () {
        let answer = {};
        answer.id = this.question.id;
        answer.question_type = this.question.question_type;
        answer.answer = this.input
        return answer;
      }
    }
  }
</script>
